What should we do in cleanup functions?

You have a functional component that starts a setInterval inside useEffect. How do you make sure the interval stops when the component unmounts?

If you add a window resize listener in a component, what do you need to do in the cleanup function to avoid issues?

What would happen if you forget to return a cleanup function from a useEffect that opens a WebSocket connection?

We saw a memory leak after navigating away from a page that fetches data with fetch inside useEffect. Walk me through how you'd adjust the effect to prevent the leak.

During a code review, a teammate's useEffect creates a subscription but doesn't clean it up. How would you explain the impact and what change would you suggest?

Our component uses an AbortController to cancel a fetch request. Where should the abort be called and why?

Design a reusable custom hook that establishes a WebSocket connection and guarantees proper cleanup across multiple components. What edge cases do you consider?

In a large app many components set up interval timers. How would you architect a centralized timer manager to avoid redundant timers and ensure cleanup?

How would you test that a component's cleanup logic works correctly under rapid mount/unmount cycles?

Our legacy codebase has many class components with componentWillUnmount cleanup scattered throughout. How would you plan a migration to functional components with hooks while ensuring no resource leaks?

When introducing a global event bus, what strategy would you adopt to enforce consistent cleanup across teams and prevent memory bloat?

Discuss the trade‑offs of delegating cleanup responsibilities to a higher‑order component versus each component handling its own cleanup.